<template>
    <el-dialog id="edit-resume"
               top="5vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="resume"></icon>
                简历 {{ resume.uid }}
            </span>
        </div>
        <!-- 基本信息 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">基本信息</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button :type="edit.basic ? 'warning' : 'primary'"
                               size="mini"
                               :plain="!edit.basic"
                               round
                               class="detail-button__edit"
                               @click="handleEditBasic(1)">
                        <icon name="edit"></icon>编辑
                    </el-button>
                </div>
            </div>
            <section v-if="!edit.basic">
                <el-descriptions size="medium"
                                 label-class-name="detail-label"
                                 border
                                 :column="2">
                    <!-- 姓名 -->
                    <el-descriptions-item label="姓名：">{{ resume.name }}</el-descriptions-item>
                    <!-- 出生日期 -->
                    <el-descriptions-item label="出生日期：">
                        <span :class="{'text-info-light': !resume.birthday}">{{ resume.birthday || '无' }}</span>
                    </el-descriptions-item>
                    <!-- 性别 -->
                    <el-descriptions-item label="性别：">
                        <span :class="{'text-info-light': !resume.gender_label}">{{ resume.gender_label || '无' }}</span>
                    </el-descriptions-item>
                    <!-- 婚姻 -->
                    <el-descriptions-item label="婚姻：">
                        <span :class="{'text-info-light': !resume.marital_label}">{{ resume.marital_label || '无' }}</span>
                    </el-descriptions-item>
                    <!-- 身高 -->
                    <el-descriptions-item label="身高：">
                        <span :class="{'text-info-light': !resume.height}">{{ resume.height || '无' }}</span>
                    </el-descriptions-item>
                    <!-- 学历 -->
                    <el-descriptions-item label="学历：">
                        <span :class="{'text-info-light': !resume.education_label}">{{ resume.education_label || '无' }}</span>
                    </el-descriptions-item>
                    <!-- 户籍 -->
                    <el-descriptions-item label="户籍：">
                        <span :class="{'text-info-light': !resume.census_label}">{{ resume.census_label || '无' }}</span>
                    </el-descriptions-item>
                    <!-- 经验 -->
                    <el-descriptions-item label="工作经验：">
                        <span :class="{'text-info-light': !resume.work_year_label}">{{ resume.work_year_label || '无' }}</span>
                    </el-descriptions-item>
                    <!-- 居住地 -->
                    <el-descriptions-item label="居住地：">
                        <span :class="{'text-info-light': !resume.homeaddress_label}">{{ resume.work_year_label || '无' }}</span>
                    </el-descriptions-item>
                    <!-- 地址 -->
                    <el-descriptions-item label="地址：">
                        <span :class="{'text-info-light': !resume.address}">{{ resume.address || '无' }}</span>
                    </el-descriptions-item>
                    <!-- 手机号码 -->
                    <el-descriptions-item label="手机号码：">
                        <span :class="{'text-info-light': !resume.mobile}">{{ resume.mobile || '无' }}</span>
                    </el-descriptions-item>
                    <!-- 邮箱 -->
                    <el-descriptions-item label="邮箱：">
                        <span :class="{'text-info-light': !resume.email}">{{ resume.email || '无' }}</span>
                    </el-descriptions-item>
                    <!-- QQ -->
                    <el-descriptions-item label="QQ 号码：">
                        <span :class="{'text-info-light': !resume.qq}">{{ resume.qq || '无' }}</span>
                    </el-descriptions-item>
                </el-descriptions>
            </section>
            <section v-else>
                <el-descriptions size="medium"
                                 label-class-name="detail-label"
                                 border
                                 :column="2">
                    <!-- 姓名 -->
                    <el-descriptions-item label="姓名：">
                        <el-input v-model="model.name" size="medium" maxlength="15" placeholder="姓名"></el-input>
                    </el-descriptions-item>
                    <!-- 出生日期 -->
                    <el-descriptions-item label="出生日期：">
                        <el-date-picker v-model="model.birthday" size="medium" type="date" placeholder="出生日期">
                        </el-date-picker>
                    </el-descriptions-item>
                    <!-- 性别 -->
                    <el-descriptions-item label="性别：">
                        <el-select v-model="model.sex" value-key="男" size="medium" placeholder="性别">
                            <el-option v-for="item in genderOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-descriptions-item>
                    <!-- 婚姻 -->
                    <el-descriptions-item label="婚姻：">
                        <el-select v-model="model.marital" size="medium" placeholder="婚姻">
                            <el-option v-for="item in maritalOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-descriptions-item>
                    <!-- 身高 -->
                    <el-descriptions-item label="身高：">
                        <el-input v-model="model.height" size="medium" maxlength="3" placeholder="身高"></el-input>
                    </el-descriptions-item>
                    <!-- 学历 -->
                    <el-descriptions-item label="学历：">
                        <el-select v-model="model.education" size="medium" placeholder="学历">
                            <el-option v-for="item in educationOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-descriptions-item>
                    <!-- 户籍 -->
                    <el-descriptions-item label="户籍：">
                        <el-cascader v-model="model.census" size="medium" :options="areaOptions"></el-cascader>
                    </el-descriptions-item>
                    <!-- 经验 -->
                    <el-descriptions-item label="工作经验：">
                        <el-select v-model="model.work_year" size="medium" placeholder="经验">
                            <el-option v-for="item in workYearOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-descriptions-item>
                    <!-- 居住地 -->
                    <el-descriptions-item label="居住地：">
                        <el-cascader v-model="model.homeaddress" size="medium" :options="areaOptions"></el-cascader>
                    </el-descriptions-item>
                    <!-- 地址 -->
                    <el-descriptions-item label="地址：">
                        <el-input v-model="model.address" size="medium" placeholder="地址"></el-input>
                    </el-descriptions-item>
                    <!-- 手机号码 -->
                    <el-descriptions-item label="手机号码：">
                        <el-input v-model="model.mobile" size="medium" maxlength="13" placeholder="手机号码"></el-input>
                    </el-descriptions-item>
                    <!-- 邮箱 -->
                    <el-descriptions-item label="邮箱：">
                        <el-input v-model="model.email" size="medium" placeholder="邮箱"></el-input>
                    </el-descriptions-item>
                    <!-- QQ -->
                    <el-descriptions-item label="QQ 号码：">
                        <el-input v-model="model.qq" size="medium" placeholder="QQ 号码"></el-input>
                    </el-descriptions-item>
                </el-descriptions>
                <div class="mt-20 text-right">
                    <el-link type="warning" class="mr-20" :underline="false" @click="edit.basic = false">取消</el-link>
                    <el-button type="warning"
                               size="medium"
                               :loading="saveLoading"
                               @click="submitForm">
                        <icon name="save"></icon>
                        保存
                    </el-button>
                </div>
            </section>
        </section>
        <!-- 求职意向 -->
        <section>
            <el-divider content-position="left">
                <div class="detail-project">
                    <span class="detail-project__mark"></span>
                    <span class="detail-project__label">求职意向</span>
                </div>
            </el-divider>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="1">
                <!-- 求职状态 -->
                <el-descriptions-item label="求职状态：">
                    <el-select v-model="model.job_status" size="medium" placeholder="求职状态">
                        <el-option v-for="item in jobStatusOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 期望职位 -->
                <el-descriptions-item label="期望职位：">
                    <el-cascader v-model="model.jobsort1"
                                 size="medium"
                                 :options="positionOptions"></el-cascader>
                </el-descriptions-item>
                <!-- 期望薪资 -->
                <el-descriptions-item label="期望薪资：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-select v-model="model.expectedsalary" size="medium" placeholder="期望薪资">
                                <el-option v-for="item in expectedSalaryOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <strong v-show="model.expectedsalary > 0"
                                class="ml-10 font-s16">元/月</strong>
                    </div>
                </el-descriptions-item>
                <!-- 工作地区 -->
                <el-descriptions-item label="工作地区：">
                    <el-input v-model="model.qq" size="medium" type="number" placeholder="QQ 号码"></el-input>
                </el-descriptions-item>
                <!-- 求职意向 -->
                <el-descriptions-item label="求职意向：">
                    <el-input v-model="model.intentionjobs" size="medium" placeholder="求职意向"></el-input>
                </el-descriptions-item>
            </el-descriptions>
        </section>
        <!-- 自我介绍 -->
        <section>
            <el-divider content-position="left">
                <div class="detail-project">
                    <span class="detail-project__mark"></span>
                    <span class="detail-project__label">自我介绍</span>
                </div>
            </el-divider>
            <el-input v-model="model.introduction" type="textarea" rows="3" size="medium" placeholder="自我介绍"></el-input>
        </section>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Prop, Emit } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import DialogBoxMixin from '@/mixins/dialog'
import functionMixin from '@/mixins/function'
import resumeOptionsMixin from '@/mixins/options'

import { toJson, loading, errorMessage, successMessage } from '@/utils'

const module = namespace('cms/resume')

import EditBasic from '@/views/cms/personal/resume/EditBasic.vue'

@Component({
  components: {
    EditBasic
  }
})
export default class Detail extends mixins(DialogBoxMixin, functionMixin, resumeOptionsMixin) {
  @Prop({ type: Object, default: { width: '1000px', visible: false } }) dialog!: any

  // Vuex
  @module.State resume!: any
  @module.Action update!: (payLoad: any) => Promise<any>

  private edit: any = {
    basic: false,
    intention: false,
    introduce: false
  }

  // form 模型
  public model: any = {}

  private saveLoading: boolean = false

  /*----- 钩子 -----*/
  created() {
    this.model = toJson(this.resume)
  }

  /**
   * 编辑基本信息
   *
   * @param index
   * @return {void}
   */
  private handleEditBasic(index: number): void {
    this.dialogBox.width = '800px'
    this.dialogBox.component = 'edit-basic'
    this.$nextTick(() => {
      this.dialogBox.visible = true
      this.dialogBox.index = index
    })
  }

  /**
   * 提交表单
   */
  private submitForm(): void | boolean {
    this.saveLoading = true
    this.update({ id: this.resume.id, index: this.dialog.index, params: this.model }).then((res: any) => {
      this.saveLoading = false
      if (res.status !== 200) {
        errorMessage(res.message)
        return false
      }

      this.model = toJson(res.data.show) // 重新赋给 model
      successMessage(res.message)
      this.close()
    }).catch((err: any) => {
      this.saveLoading = false
    })
  }

  @Emit()
  close(): void {}
}
</script>

<style lang="scss" scoped>
@import '~@/styles/element/element-variables';

::v-deep {
    .el {
        &-date {
            &-editor {
                &.el-input {
                    width: 100% !important;;
                }
            }
        }

        &-select,
        &-cascader {
            width: 100% !important;
        }
    }
}

::v-deep .detail {
    &-project {
        display: flex;
        align-items: center;

        &__mark {
            margin-right: 6px;
            width: 4px;
            height: 20px;
            background-color: $--color-primary;
            border-radius: 5px;
        }

        &__label {
            color: $--color-primary;
            font-size: 16px;
            line-height: 1;
        }
    }

    &-button {
        &__edit {
            padding: 3px 10px;
        }
    }

    &-label {
        width: 100px !important;
        text-align: right;
    }
}
</style>
